<template>
 	<view class="container">
 		<view class="content_shang">
 			<text>亏吨扣费</text>
 		</view>
 		<view class="content_xia">
 			<view class="xia_shang">
 				<view class="shang_shang">
 					<view class="left">
 						磅差在（含）
 					</view>
 					<view class="right">
 						<input type="number" placeholder="请输入吨数" v-model="weight" :min="0" :max="1" step="0.01"
 							@input="validateWeight" />吨以内免扣费
 					</view>
 				</view>
 				<view class="shang_xia">
 					<view class="xia_left">
 						每少0.01吨，扣
 					</view>
 					<view class="xia_right">
 						<input type="number" placeholder="请输入金额" v-model="fee" @input="validateFee" />元
 					</view>
 				</view>
 			</view>
 			<view class="xia_text">
 				卸车净重小于装车净重{{weight}}吨以内免扣费，每少0.01吨，扣费{{fee}}元。
 				<view v-if="errorMessage" class="error-message">{{ errorMessage }}</view>
 			</view>
 			<!-- 显示错误信息 -->
 
 			<button class="submit-btn" @click="submitForm" :disabled="!isFormValid">提交</button>
 		</view>
 
 	</view>
 </template>
 
 <script setup>
 	import {
 		ref,
 		computed
 	} from 'vue';
 
 	const weight = ref('0.0');
 	const fee = ref(0.5); // 新增费用数据绑定
 	const errorMessage = ref(''); // 错误消息
 	// 验证并确保 weight 在 0 到 1 之间
 	const validateWeight = () => {
 		// 清除非法输入（不是数字）
 		if (isNaN(weight.value) || weight.value === '') {
 			errorMessage.value = '吨数必须是数字';
 			return;
 		}
 		if (parseFloat(weight.value) < 0) {
 			weight.value = '0';
 		} else if (parseFloat(weight.value) > 1) {
 			weight.value = '1';
 		} else {
 			errorMessage.value = ''; // 清除错误信息
 		}
 	};
 
 	// 验证 fee 是否为有效数字
 	const validateFee = () => {
 		// 清除非法输入（不是数字）
 		if (isNaN(fee.value) || fee.value === '') {
 			errorMessage.value = '金额必须是数字';
 			return;
 		}
 		fee.value = fee.value.replace(/[^0-9.]/g, ''); // 去除非数字字符
 		if (parseFloat(fee.value) <= 0) {
 			errorMessage.value = '金额必须大于0';
 		} else {
 			errorMessage.value = ''; // 清除错误信息
 		}
 	};
 
 	// 检查表单是否有效
 	const isFormValid = computed(() => {
 		// 确保 weight 和 fee 都是有效的数字，并且 fee 大于 0
 		return weight.value > 0 && fee.value > 0 && !errorMessage.value;
 	});
 	// 提交表单
 	const submitForm = () => {
 		// 校验表单数据
 		if (parseFloat(weight.value) < 0 || parseFloat(weight.value) > 1) {
 			errorMessage.value = '磅差应在0到1吨之间！';
 			return; // 如果校验失败，不进行提交
 		}
 
 		if (parseFloat(fee.value) <= 0) {
 			errorMessage.value = '扣费金额应大于0！';
 			return; // 如果校验失败，不进行提交
 		}
 
 		// 如果校验通过，清除错误消息
 		errorMessage.value = '';
 
 		// 提交逻辑：保存数据并跳转
 		uni.setStorageSync('weight', weight.value);
 		uni.setStorageSync('fee', fee.value);
 
 		// 返回上一页
 		uni.navigateBack({
 			delta: 1 // 返回上一级页面
 		});
 	};
 </script>
 
 <style lang="scss">
 	.container {
 		.content_shang {
 			width: 100%;
 			height: 130rpx;
 			line-height: 130rpx;
 			padding-left: 40rpx;
 			font-size: 40rpx;
 			background-color: #002fa7;
 			color: #fff;
 		}
 
 		.content_xia {
 			width: 100%;
 			background-color: #eeeeee;
 			border-radius: 20rpx 20rpx 0 0;
 			display: flex;
 			flex-direction: column;
 			align-items: center;
 			height: 100vh;
 			/* 高度占满整个视口 */
 
 			.xia_shang {
 				width: 90%;
 				height: 170rpx;
 				background-color: #fff;
 				display: flex;
 				flex-wrap: wrap;
 				font-size: 40rpx;
 				border-radius: 20rpx;
 				margin-top: 30rpx;
 
 				.shang_shang {
 					width: 100%;
 					display: flex;
 					justify-content: space-between;
 					padding: 0 20rpx 0 20rpx;
 					border-bottom: 1px solid #eee;
 					height: 50%;
 					align-items: center;
 				}
 
 				.shang_shang .left {
 					font-size: 29rpx;
 					width: 50%;
 				}
 
 				.shang_shang .right {
 					font-size: 29rpx;
 					width: 50%;
 					display: flex;
 					align-items: center;
 					justify-content: flex-start;
 					/* 保证输入框和文字紧挨 */
 				}
 
 				.right input {
 					width: 40%;
 					height: 50rpx;
 					border-radius: 5rpx;
 					padding-left: 10rpx;
 					font-size: 25rpx;
 				}
 
 				.shang_xia {
 					width: 100%;
 					display: flex;
 					justify-content: space-between;
 					padding: 0 20rpx 0 20rpx;
 					border-bottom: 1px solid #eee;
 					height: 50%;
 					align-items: center;
 
 					.xia_left {
 						font-size: 29rpx;
 						width: 50%;
 					}
 
 					.xia_right {
 						font-size: 29rpx;
 						width: 50%;
 						display: flex;
 						align-items: center;
 						justify-content: flex-start;
 						/* 保证输入框和文字紧挨 */
 					}
 
 					.xia_right input {
 						width: 40%;
 						height: 50rpx;
 						border-radius: 5rpx;
 						padding-left: 10rpx;
 						font-size: 25rpx;
 					}
 				}
 
 			}
 
 			.xia_text {
 				width: 90%;
 				height: 200rpx;
 				font-size: 26rpx;
 				margin-top: 30rpx;
 				margin-bottom: 30rpx;
 			}
 		}
 
 		.submit-btn {
 			width: 700rpx;
 			height: 80rpx;
 			background-color: #1E62B8;
 			color: white;
 			border-radius: 10rpx;
 			font-size: 32rpx;
 			margin-top: -100rpx;
 		}
 
 		.submit-btn:disabled {
 			background-color: #ccc;
 			/* 灰色禁用样式 */
 		}
 
 		.error-message {
 			color: red;
 			font-size: 30rpx;
 			margin-top: 20rpx;
 			text-align: center;
 		}
 	}
 </style>